<template>
    <div class="new-check-list" ref="container">
        <div class="list-th" v-for="(item, index) in data" :key="index" >
            <div class="time item">{{ item.time }}</div>
            <div class="name item">{{ item.name }}</div>
            <div class="star item">
                <el-icon class="icon" v-for="(star, index) in item.star" :key="index">
                    <StarFilled />
                </el-icon>
            </div>
            <div class="comment item">{{ item.comment }}</div>
        </div>
    </div>
</template>

<script setup>
import { StarFilled } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

const { data } = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})

const container = ref(null);
const containerStyle = ref(null);

onMounted(() => {
    if (container.value) {
        containerStyle.value = window.getComputedStyle(container.value);
        container.value.style.top = container.value.getBoundingClientRect().height + 'px';
        setTimeout(() => {
            container.value.style.top = 0;
        }, 500);
    }
});

</script>

<style scoped>
.item-content .list-th {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-around;
}

.item-content .list-th .list-td {
    width: 40%;
    font-size: 1vw;
    text-align: center;
    color: #e6f7ff;
    height: 2vw;
    line-height: 2vw;
}

.main-content .new-check-list {
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all 1s cubic-bezier(0.88, 1, 0.61, 1.48);
}

.main-content .new-check-list .no-list {
    line-height: 1.25vw;
    text-align: center;
    font-size: 0.7vw;
    color: #eef8ff;
}

.main-content.last-content .list-th .list-td {
    font-size: 0.9vw;
}

.new-check-list .list-th {
    color: #e6f7ff;
    width: 100%;
    justify-content: space-between;
    padding: 0.3vw;
    font-size: 0.8vw;
}

.new-check-list .list-th .item {
    flex-basis: 40%;
    text-align: center;
}

.new-check-list .list-th .item.star {
    color: #f7ba2a;
    font-size: 1vw;
}

.new-check-list .list-th .item.star .icon {
    padding: 0.2vw;
}

.new-check-list .list-th .item.comment {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.list-th {
    display: flex;
    justify-content: space-around;
}
</style>